<html>
  <head>
    <style>
      ul { 
            padding:0;
            border-spacing:-1px;
            flow: "a a"
                  "b c"
                  "d c";  
            width:*;      
            height:*;
         }
      li { display:block; border:1px solid; width:*; height:*;}
      li:nth-child(1) { float:"a"; }
      li:nth-child(2) { float:"b"; }
      li:nth-child(3) { float:"c"; }
      li:nth-child(4) { float:"d"; }
      pre { border: 1px dotted #555; background: aliceblue; padding:10px; }
    </style>
  </head>
<body>
  <ul>
    <li> 1 </li>
    <li> 2 </li>
    <li> 3 </li>
    <li> 4 </li>
  </ul>
  Style:
  <pre>
      ul { 
            padding:0;
            border-spacing:-1px;
            flow: "a a"
                  "b c"
                  "d c";  
            width:*;      
            height:*;
         }
      li { display:block; border:1px solid; width:*; height:*;}
      li:nth-child(1) { float:"a"; }
      li:nth-child(2) { float:"b"; }
      li:nth-child(3) { float:"c"; }
      li:nth-child(4) { float:"d"; }
  </pre>  
</body>
</html>